﻿@{
    Layout = "_LayoutAdmin";
}

@model X.PagedList.StaticPagedList<Moonglade.Model.CommentListItem>
@using Moonglade.Core
@using Moonglade.DateTimeOps
@using X.PagedList.Mvc.Core
@using X.PagedList.Mvc.Core.Common
@inject IDateTimeResolver DateTimeResolver

@Html.AntiForgeryToken()

@section scripts{
    <script>
        $(function () {
            $(".btn-delete").click(function () {
                var cid = $(this).data("commentid");
                ajaxPostWithCSRFToken("delete", { commentId: cid }, function (data) {
                    $(`#panel-comment-${data}`).slideUp();
                });
            });

            $(".btn-reply").click(function () {
                var cid = $(this).data("commentid");
                $(`#panel-comment-${cid} .reply-ui`).show();
            });

            $(".btn-reply-post").click(function () {
                var cid = $(this).data("commentid");
                var replyContent = $(`#replycontent-${cid}`).val();

                ajaxPostWithCSRFToken("reply", { commentId: cid, replyContent: replyContent }, function (data) {
                    $(`#panel-comment-${data.commentId} .reply-ui`).slideUp();
                    $(`#panel-comment-${data.commentId} .reply-list`).prepend(
                        `<hr /><div class="reply-container"><div><strong>Reply</strong><span class="pull-right text-muted">${data.replyTimeUtc
                        }</span></div><p>${data.replyContentHtml}</p></div>`);
                });
            });

            $(".btn-approve").click(function () {
                ajaxPostWithCSRFToken("set-approval-status", { commentId: $(this).data("commentid") }, function (data) {
                    $(`#panel-comment-${data} .btn-approve`).toggleClass('btn-outline-success');
                    $(`#panel-comment-${data} .btn-approve`).toggleClass('btn-success');
                });
            });
        });
    </script>
}

@section head{
    <style>
        .mdrendered-comment-content img {
            max-width: 720px;
        }

        .reply-container {
            padding-left: 10px;
            border-left: 4px solid #CECECE;
        }
    </style>
}

<h3>
    Comments
</h3>
<hr />

@if (Model.Count == 0)
{
    <div class="alert alert-info">
        No Comments
    </div>
}
else
{
    foreach (var item in Model)
    {
        <div id="panel-comment-@item.Id" class="card mb-4">
            <div class="card-body">
                <div class="float-right">
                    <a href="javascript:;" class="btn btn-sm @(item.IsApproved ? "btn-success" : "btn-outline-success") btn-approve" data-commentid="@item.Id">
                        <span class="icon-star-full"></span>
                    </a>
                    <button class="btn btn-sm btn-primary btn-reply" data-commentid="@item.Id">
                        <span class="icon-undo2"></span>
                    </button>
                    <button class="btn btn-sm btn-danger btn-delete" data-commentid="@item.Id">
                        <span class="icon-bin"></span>
                    </button>
                </div>

                <h6>
                    @item.Username (<a href="mailto:@item.Email" class="d-none d-sm-inline">@item.Email</a>)
                </h6>
                <div class="mdrendered-comment-content">
                    @Html.Raw(Utils.ConvertMarkdownContent(item.CommentContent, Utils.MarkdownConvertType.Html))
                </div>
                <div class="text-muted">
                    @item.PostTitle
                </div>

                <div class="text-muted">
                    <span>@DateTimeResolver.GetDateTimeWithUserTZone(item.CreateOnUtc).ToString("yyyy-MM-dd HH:mm")</span> | <span class="text-muted d-none d-sm-inline">@item.IpAddress</span>
                </div>

                <div class="reply-ui mt-3" style="display: none;">
                    <form>
                        <div class="form-group">
                            <textarea class="form-control"
                                      id="replycontent-@item.Id"
                                      name="ReplyContent"
                                      placeholder="Content" type="text"></textarea>
                        </div>

                        <a class="btn btn-success btn-reply-post" href="#" data-commentid="@item.Id">
                            Reply
                        </a>
                    </form>
                </div>
                <div class="reply-list">
                    @foreach (var reply in item.CommentReplies.OrderByDescending(t => t.ReplyTimeUtc))
                    {
                        <hr />
                        <div class="reply-container">
                            <div>
                                <strong>You Replied</strong>
                            </div>
                            <div class="mb-2">
                                @Html.Raw(Utils.ConvertMarkdownContent(reply.ReplyContent, Utils.MarkdownConvertType.Html))
                            </div>
                            <div class="text-muted">@DateTimeResolver.GetDateTimeWithUserTZone(reply.ReplyTimeUtc)</div>
                        </div>
                    }
                </div>
            </div>
        </div>
    }
}

@Html.PagedListPager(Model, page => $"?page={page}", new PagedListRenderOptions
{
    LiElementClasses = new[] { "page-item" },
    PageClasses = new[] { "page-link" },
    UlElementClasses = new[] { "pagination justify-content-end" },
    DisplayEllipsesWhenNotShowingAllPageNumbers = false
})